Export to CSV

  • Installation

    
    
                      npm install xlsx
                      npm install file-saver
                    

  • app.module.ts

    
    
                      import { BrowserModule } from '@angular/platform-browser';
                      import { NgModule } from '@angular/core';
    
                      import { AppComponent } from './app.component';
                      import {FormsModule} from '@angular/forms';
                      import { ExcelService } from './services/excel.service';
    
                      @NgModule({
                        declarations: [
                          AppComponent
                        ],
                        imports: [
                          BrowserModule,
                          FormsModule
                        ],
                        providers: [ExcelService],
                        bootstrap: [AppComponent]
                      })
                      export class AppModule { }
    
    
                    
    ExcelService

  • Service: excel.service.ts

    
                    import { Injectable } from '@angular/core';
                    import * as FileSaver from 'file-saver';
                    import * as XLSX from 'xlsx';
    
                    const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
                    const EXCEL_EXTENSION = '.xlsx';
    
                    @Injectable()
                    export class ExcelService {
    
                      constructor() { }
    
                      public exportAsExcelFile(json: any[], excelFileName: string): void {
                        
                        const myworksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
                        const myworkbook: XLSX.WorkBook = { Sheets: { 'data': myworksheet }, SheetNames: ['data'] };
                        const excelBuffer: any = XLSX.write(myworkbook, { bookType: 'xlsx', type: 'array' });
                        this.saveAsExcelFile(excelBuffer, excelFileName);
                      }
    
                      private saveAsExcelFile(buffer: any, fileName: string): void {
                        const data: Blob = new Blob([buffer], {
                          type: EXCEL_TYPE
                        });
                        FileSaver.saveAs(data, fileName + '_exported'+ EXCEL_EXTENSION);
                      }
    
                    }
    
                    

  • component: app.component.ts

    
    
                      import { Component } from '@angular/core';
    import { ExcelService } from './services/excel.service';
    
    
    export class AppComponent {
      title = 'exportExcelInAngular';
      dataOfFootballers: any = [{
        playerName: 'Cristiano Ronaldo',
        playerCountry: 'Pourtgal',
        playerClub: 'Juventus'
      },
      {
        playerName: 'Lionel Messi',
        playerCountry: 'Argentina',
        playerClub: 'Barcelona'
      },
      {
        playerName: 'Neymar Junior',
        playerCountry: 'Brazil',
        playerClub: 'PSG'
      },
      {
      playerName: 'Tonni Kroos',
      playerCountry: 'Germany',
      playerClub: 'Real Madrid'
      },
      {
        playerName: 'Paul Pogba',
        playerCountry: 'France',
        playerClub: 'Manchester United'
      }];
      constructor(private excelService:ExcelService){
    
      }
      exportAsXLSX():void {
        this.excelService.exportAsExcelFile(this.dataOfFootballers, 'footballer_data');
      }
    }
    
    
                    

  • in html: app.component.html

    
    
                      <button (click)="exportAsXLSX()">
      <i class="fa fa-file-excel-o" style="font-size:48px;color:blue"></i></button>
      
    <table class="table table-striped">
    	<tr>
    		<td><b>Player Name</b></td>
    		<td><b>Player Country</b></td>
    		<td><b>Player Club</b></td>
      </tr>
      <tbody>
    	<tr *ngFor="let item of dataOfFootballers">
    		<td>{item.playerName}</td>
    		<td>{item.playerCountry}</td>
    		<td>{item.playerClub}</td>
      </tr>
      </tbody>
    </table>